<template>
  <div class="xq">
    <div class="title">
      <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
      <span style="font-size: 16px">课程详情</span>
      <li>
        <!-- <img
          src="../assets/星星.png"
          alt=""
          style="width: 25px; height: 25px; padding-right: 10px"
          @click="shouC($route.query.xqid)"
        /> -->
         <van-icon
          :name="obj.list.info.is_collect == 0 ? 'star-o' : 'star'"
          size="22"
          color="black"
          @click="shouC($route.query.xqid)"
        />
        <img
          src="../assets/客服.png"
          alt=""
          style="width: 25px; height: 25px;vertical-align: middle;margin: 0 10px;"
          @click="erweima"
        />
      </li>
    </div>
    <van-swipe
      class="my-swipe"
      indicator-color="white"
      v-if="obj.videos.length > 1"
    >
      <van-swipe-item>
        <video
          class="iii1"
          controls
          :src="obj.videos[0].banner_src"
          autoplay
          muted
        ></video>
      </van-swipe-item>
      <van-swipe-item>
        <img class="iii1" :src="obj.videos[1].banner_src" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-swipe
      class="my-swipe"
      v-if="obj.videos.length == 1"
      indicator-color="white"
    >
      <img class="iii1" :src="obj.videos[0].banner_src" alt="" />
    </van-swipe>
    <div class="center">
      <h2 style="font-size: 16px">{{ obj.list.info.title }}</h2>
      <li class="ll">
        共{{ obj.list.info.course_count }}个课时 |
        {{ obj.list.info.classify_parent_title }}
      </li>
      <p style="">已报名{{ obj.list.info.sales_num }}人</p>
      <ul>
        <li v-for="(item, index) in obj.bzr" :key="index">
          <img class="io" :src="item.avatar" alt="" />
          <span>{{ item.teacher_name }}</span>
        </li>
      </ul>
    </div>
    <div class="kqzb">
      <h1 style="font-size: 16px">课前准备</h1>
      <li>
        <span class="s1">{{ obj.kqzb.guided_words }}</span>
        <span class="s2">联系方式</span>
      </li>
    </div>
    <div class="fw fw1">
      <li>服务</li>
      <li v-for="(item, index) in obj.fw" :key="index" style="display: flex">
        {{ item.service_name }}
      </li>
      <li><van-icon name="arrow" /></li>
    </div>
    <div class="fw">
      <li>赠品</li>
      <li class="tt" v-for="(item, index) in obj.mt" :key="index" style="">
        {{ item.gift_name }}
      </li>
      <li><van-icon name="arrow" /></li>
    </div>
    <!-- tab切换 -->
    <van-tabs v-model:active="obj.active">
      <van-tab title="课程详情">
        <div class="dd" v-html="obj.list.info.course_details"></div>
      </van-tab>
      <van-tab title="课程安排">
        <li class="oo">
          <span
            :class="obj.num == 0 ? 'ssx' : ''"
            @click="zjfl(0)"
            style="font-size: 12px; vertical-align: middle"
            ><img
              src="../assets/详情1.png"
              style="width: 15px; height: 15px; vertical-align: middle"
              alt=""
            />
            章节分类</span
          ><span
            :class="obj.num == 1 ? 'ssx' : ''"
            @click="zjfl(1)"
            style="font-size: 12px"
          >
            <img
              src="../assets/详情2.png"
              style="width: 15px; height: 15px; vertical-align: middle"
              alt=""
            />
            时间排序</span
          >
        </li>
        <div class="zjfl" v-if="obj.num == 0">
          <van-collapse v-model="obj.activeNames">
            <van-collapse-item
              v-for="(item, index) in obj.kcap"
              :name="index"
              :key="index"
              style="background-color: #f6f6f6"
            >
              <template #title style="background-color: #f6f6f6">
                {{ item.course_title }}
              </template>
              <van-collapse-item
                v-for="(item1, index1) in item.list"
                :title="item1.title"
                :key="index1"
              >
                <van-collapse-item
                  v-for="(item2, index2) in item1.child"
                  :title="item2.periods_title"
                  :key="index2"
                >
                </van-collapse-item>
              </van-collapse-item>
            </van-collapse-item>
          </van-collapse>
        </div>
        <div class="sjpx" v-if="obj.num == 1">
          <div v-for="(item9, index9) in obj.sjpx" :key="index9" class="sjpx">
            {{ index9 + 1 }}.[录播]{{ item9.periods_title }}
            <p>{{ item9.course_validity_date }}</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="资料下载">暂无内容 </van-tab>
      <van-tab title="课程评价">
        <div class="pj" v-for="(item10, index10) in obj.pjs" :key="index10">
          <div class="left">
            <img class="tp" :src="item10.avatar" alt="" />
          </div>
          <div class="right">
            <p style="font-size: 12px">{{ item10.user_nickname }}</p>
            <van-rate
              color="#f7ba2a"
              disabled-color="#f7ba2a"
              readonly
              v-model="item10.grade"
            />
            <span>{{ item10.content }}</span>
            <span>{{ filtt(item10.created_at) }}</span>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="bottom">
      <li class="lo1">￥{{ obj.list.info.price }}</li>
      <li class="lo2">客服</li>
      <li class="lo3">立即报名</li>
    </div>
    <!-- 二维码弹框 -->
    <van-popup v-model:show="show" style="padding: 15px;">
      <p class="perm" style="margin-bottom: 20px">二维码</p>
      <img :src="imgURL" alt=""  style="width: 280px;height: 300px;"/>
      <!-- <div class="ewm" style="padding: 20px">
        <qrcode-vue
          value="https://wap.lexuemiao.com/miaowu "
          :size="obj.qcsize"
          level="H"
        />
      </div> -->
    </van-popup>
  </div>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getxq, getkqzb, getsjpx, getpj, shouapi } from "../api/homeApi.js";
// import QrcodeVue from "qrcode.vue";
import QRcode from "qrcode";
const route = useRoute();
const router = useRouter();
const imgURL = ref("");
const show = ref(false);
let obj = reactive({
  basis_id: route.query.id,
  videos: [],
  list: [],
  bzr: [],
  fw: [],
  mt: [],
  kqzb: {},
  active: 0,
  kcap: [],
  num: 0,
  sjpx: [],
  num1: "ppp",
  zt: false,
  activeNames: [],
  pjs: [],
});
function filtt(timestamp) {
  // console.log("1111", a);
  var date = new Date(timestamp * 1000);
  var Y = date.getFullYear() + "-";
  var M =
    (date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1) + "-";
  var D =
    date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
  var H = date.getHours() + ":";
  var M2 =
    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
    ":";
  var S = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return Y + M + D + H + M2 + S;
}
// 二维码
const erweima = () => {
  show.value = true;
  // 获取url
  const url = 'location.href';
  console.log(url);
  // 生成二维码
  QRcode.toDataURL(url, (err, url) => {
    console.log(url);
    imgURL.value = url;
  });
  // 渲染到弹框里
};
// 收藏
const shouC = async (e) => {
  const res = await shouapi({ basis_id: e, type: 1 });
  obj.list.info.value.is_collect = res.data.data.is_collect;
};
// 获取评价
const getppj = async () => {
  const res = await getpj(route.query.id);
  obj.pjs = res.data.data.list;
  //   console.log("pj", res);
};
getppj();
// 获取时间排序
const getsj = async () => {
  const res = await getsjpx(route.query.id);
  console.log("111", res);
  obj.sjpx = res.data.data;
  console.log(obj.sjpx);
};
getsj();
// 点击出现下一级
const cxxl = (i) => {
  // obj.num1=i
  // // if(obj.num1==i){
  // //     obj.num1='pppp'
  // // }
  if (obj.zt == false) {
    obj.zt = true;
    obj.num1 = i;
  } else if (obj.zt == true) {
    obj.zt = false;
    obj.num1 = "ppp";
  }
};
// 点击章节分类切换高亮
const zjfl = (i) => {
  obj.num = i;
};
// 获取可签准备
const getkq = async () => {
  const res = await getkqzb(route.query.id);
  console.log(res);
  obj.kqzb = res.data.data.teacher_wechat_info;
};
// 获取详情数据
const getxqsj = async () => {
  const res = await getxq(route.query.id);
  obj.videos = res.data.data.banner;
  obj.list = res.data.data;
  obj.bzr = res.data.data.info.teacher.slice(0, 3);
  obj.fw = res.data.data.service_list.slice(0, 4);
  obj.mt = res.data.data.gift_list;
  obj.kcap = res.data.data.course_periods;
  obj.sjpx = res.data.data;
  console.log(obj.kcap);
  console.log("时间排序", obj.sjpx);
};
getxqsj();
getkq();
</script>
<style lang="scss">
.bottom {
  height: 100px;
  display: flex;
  width: 100%;
  position: fixed;
  background: #fff;
  align-items: center;

  bottom: 0;
  left: 0;
  right: 0;
  li {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lo1 {
    flex: 4;
    color: red;
  }
  .lo2 {
    flex: 1;
  }
  .lo3 {
    flex: 6;
    background: #f15a24;
    color: #fff;
  }
}
.perm {
  text-align: center;
  transform: translateY(30px);
  font-size: 22px !important;
}
.right {
  display: flex;
  flex-direction: column;
  li {
    margin: 10px 0;
  }
  span {
    margin-bottom: 10px;
  }
}
.tp {
  width: 70px;
  height: 70px;
  margin-right: 10px !important;
}
.pj {
  display: flex;
  padding: 20px !important;
  box-sizing: border-box;
}
.iu {
  float: right;
  font-size: 22px;
}
.van-tabs__content {
  background: #fff;
  padding-bottom: 15px;
}
.oo1 {
  background: #ccc;
  font-size: 22px !important;
  margin: 12px 0 !important;
  padding: 15px 15px !important;
}
.oo {
  display: flex;
  justify-content: center;
  span {
    display: inline-block;
    padding: 15px 25px;
    font-size: 22px;
    border-radius: 20px;
    border: 1px solid #ccc;
    margin: 15px;
  }
  .ssx {
    display: inline-block;
    padding: 15px 25px;
    font-size: 22px;
    border-radius: 20px;
    border: 1px solid #ff9113;
    margin: 15px;
    color: #ff9113;
  }
}
.dd {
  img {
    width: 100vw !important;
  }
}
</style>

<style lang="scss" scoped>
.sjpx {
  padding: 20px;
}
.dd {
  img {
    width: 100vw !important;
  }
}
.mm {
  width: 100%;
}
.tt {
  font-size: 12px;
}
.fw {
  display: flex;
  padding: 12px;
  background: #fff;
  font-size: 12px;
  li {
    font-size: 12px;
    // width: 18%;
    margin: 0 12px;
    text-align: center;
  }
}
.fw1 {
  margin: 15px 0 3px 0;
}
.kqzb {
  background: #fff;
  padding: 10px 20px;
  margin-top: 15px;
  border-bottom: 20px solid #eee;

  h1 {
    font-size: 32px;
  }
  li {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .s2 {
      font-size: 14px;
      display: inline-block;
      padding: 8px 25px;
      background: #ef8a1f;
      color: #fff;
      border-radius: 40px;
    }
  }
}
.xq {
  background: #f7f7f7;
}
ul {
  background: #fff;
  display: flex;
  margin: 15px 0;
  li {
    margin-right: 22px;
    display: flex;
    align-items: center;
    img {
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}
.io {
  width: 70px;
  height: 70px;
}
.center {
  background: #fff;
  padding: 22px;
  p {
    color: rgb(151, 137, 137);
    font-size: 18px;
    font-style: oblique;
  }
  h2 {
    font-size: 16px;
  }
  .ll {
    margin: 15px 0;
    color: #ccc;
  }
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}
.van-swipe {
  width: 100vw;
  height: 400px;
  background: #fff;
}
.iii1 {
  width: 100%;
  height: 100%;
}
:deep(.van-swipe__track) {
  width: 100% !important;
}
.title {
  background: #fff;
  display: flex;
  padding: 19px;
  justify-content: space-between;
  align-items: center;
  span {
    font-size: 19px !important;
  }
  li {
    img {
      width: 40px;
      height: 40px;
    }
    span {
      margin-right: 12px;
    }
  }
}
</style>
